<template>
	<view class="member-box">
		<uni-table>
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="left" width="100">公司名字</uni-th>
				<uni-th align="center" width="100">考生类型</uni-th>
				<uni-th align="center" width="100">招生人数</uni-th>
				<uni-th align="center" width="130">学制学费（每年）</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="item in 10" :key="item">
				<uni-td align="left" width="100">
					<view class="school-info">
						<view class="table-bold">拜课网</view>
					</view>
				</uni-td>
				<uni-td align="center" width="100" class="table-bold">普通考试</uni-td>
				<uni-td align="center" width="100" class="table-bold">这么多人</uni-td>
				<uni-td align="center" width="130" class="table-bold">好几年/好多钱</uni-td>
			</uni-tr>
		</uni-table>
		<view class="member-info-box">
			<view class="member-title">会员专享权益</view>
			<view class="uls">
				<view v-for="(item, index) in memberArr" :key="index">
					<image :src="item.url"></image>
					<view class="text">{{ item.text }}</view>
				</view>
			</view>
			<view class="member-btn" @click.stop="openVip()">立即开通VIP会员 查看全部</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'memberBenefits',
	data() {
		return {
			memberArr: [
				{ text: '好课限免', url: 'https://bicpic.baikewang.com/images/1689752575474.png' },
				{ text: '题型刷题', url: 'https://bicpic.baikewang.com/images/1689752575443.png' },
				{ text: '背单词', url: 'https://bicpic.baikewang.com/images/1689752575445.png' },
				{ text: '尊享VIP价', url: 'https://bicpic.baikewang.com/images/1689752575447.png' },
				{ text: '更多权益', url: 'https://bicpic.baikewang.com/images/1689752575468.png' }
			]
		};
	},
	methods: {
		// TODO
		openVip() {}
	}
};
</script>

<style lang="scss" scoped>
.member-box {
	position: relative;
}
.member-info-box {
	position: absolute;
	left: -39rpx;
	top: 0;
	z-index: 99;
	width: 100vw;
	min-height: 100%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.17) 100%);
	backdrop-filter: blur(20rpx);
	padding: 200rpx 39rpx;
	box-sizing: border-box;
	.member-title {
		text-align: center;
		font-size: 39rpx;
		color: #3c3437;
		font-weight: bold;
		position: relative;
		&::before {
			content: '';
			position: absolute;
			height: 4rpx;
			width: calc(100vw * (151 / 750));
			background: linear-gradient(270deg, #3c3538 0%, rgba(255, 255, 255, 0) 100%);
			border-radius: 19rpx;
			left: 0;
			top: 50%;
			z-index: 1;
			transform: translate(0, -50%);
		}
		&::after {
			content: '';
			position: absolute;
			height: 4rpx;
			width: calc(100vw * (151 / 750));
			background: linear-gradient(90deg, #4a4748 0%, rgba(255, 255, 255, 0) 100%);
			border-radius: 19rpx;
			right: 0;
			top: 50%;
			z-index: 1;
			transform: translate(0, -50%);
		}
	}
	.uls {
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		text-align: center;
		margin: 56rpx 0 112rpx;
		> view {
			flex-shrink: 0;
			image {
				width: calc(100vw * (81 / 750));
				height: calc(100vw * (81 / 750));
				margin-bottom: 8rpx;
			}
			.text {
				font-size: 24rpx;
				color: #302e36;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
	.member-btn {
		width: 100%;
		display: inline-block;
		padding: 27rpx 0;
		box-sizing: border-box;
		background: linear-gradient(270deg, #ec6f52 0%, #ee8743 100%);
		border-radius: 23rpx;
		font-size: 33rpx;
		color: #ffffff;
		font-weight: bold;
		text-align: center;
	}
}
</style>
